<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>流量指标分析（企业）</title>
  <link rel="stylesheet" href="../../mobile_static/css/element.css">
  <link rel="stylesheet" href="../../mobile_static/css/base.css">
  <link rel="stylesheet" href="../../mobile_static/css/trafficMetrics-headquarters/trafficMetrics-headquarters.css">
  <script src="../../mobile_static/js/echarts.js"></script>
  <script src="../../mobile_static/js/vue.js"></script>
  <script src="../../mobile_static/js/axios.js"></script>
  <script src="../../mobile_static/js/jquery-1.10.2.min.js"></script>

</head>

<body>
  <div id="app" v-cloak>
    <div class="app-content">
      <!-- 头部导航栏 -->
      <div class="top-bar">
        <div class="top-bar_left">
          <ul>
            <li :class="{'selected':isSelect == 1}" @click="isSelect=1">昨日</li>
            <li :class="{'selected':isSelect == 2}" @click="isSelect=2">近7天</li>
            <li :class="{'selected':isSelect == 3}" @click="isSelect=3">近30天</li>
            <li :class="{'selected':isSelect == 4}" @click="isSelect=4">本年</li>
          </ul>
          <div class="date-box">
            <el-date-picker value-format="yyyy-MM-dd" v-model="value1" @change="dateChange" type="daterange"
              unlink-panels range-separator="至" start-placeholder="请选择开始日期" end-placeholder="请选择结束日期">
            </el-date-picker>
          </div>

        </div>
        <div class="top-bar_right">
          <div class="selectBox">
            <el-select v-model="selectValue" filterable placeholder="请选择" @change="downChange">
              <el-option v-for="item in selectOptions" :key="item.g0departmentcode" :label="item.g0departmentname"
                :value="item.g0departmentcode">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <!-- 卡片 -->
      <div class="card">
        <ul>
          <li>
            <div class="card-top_title">
              <p>访问总量（PV） <el-popover placement="top-start" width="200" trigger="hover"
                  content="时间范围内，本企业客户端APP的访问总量。每打开一个页面便记录1次，多次打开同一页面则浏览量累计。">
                  <i slot="reference" class="el-icon-warning-outline"></i>
                </el-popover>
              </p>
              <h1 v-loading="load1" @click="Jump_PV">{{cardDate.cardOne.number}}</h1>
            </div>
            <div class="card-down_sequential">
              <p v-if="isSelect == 1 || isSelect == 2">环比
                <span v-if="cardDate.cardOne.sequential < 0" style="margin: 0 10px;color: #F5222D;"><i
                    class="el-icon-caret-bottom"></i></span>
                <span v-else style="margin: 0 10px;color: #2FC25B;"><i class="el-icon-caret-top"></i></span>
                {{cardDate.cardOne.sequential}}%
              </p>
            </div>
          </li>
          <li>
            <div class="card-top_title">
              <p>访问总用户数 （UV） <el-popover placement="top-start" width="200" trigger="hover"
                  content="时间范围内，访问本企业客户端APP的总人数，相同访客多次访问只计算1次。">
                  <i slot="reference" class="el-icon-warning-outline"></i>
                </el-popover>
              </p>
              <h1 v-loading="load1" @click="Jump_UV">{{cardDate.cardTwo.number}}</h1>
            </div>
            <div class="card-down_sequential">
              <p v-if="isSelect == 1 || isSelect == 2">环比
                <span v-if="cardDate.cardOne.sequential < 0" style="margin: 0 10px;color: #F5222D;"><i
                    class="el-icon-caret-bottom"></i></span>
                <span v-else style="margin: 0 10px;color: #2FC25B;"><i class="el-icon-caret-top"></i></span>
                {{cardDate.cardTwo.sequential}}%
              </p>
            </div>
          </li>
          <li>
            <div class="card-top_title">
              <p>活跃总用户数 <el-popover placement="top-start" width="200" trigger="hover" content="活跃总用户数： 时间范围内， 访问本企业客户端 APP的总人数， 相同访客多次访问只计算1次。 
                           用户总数：累计登录过客户端的用户总数。">
                  <i slot="reference" class="el-icon-warning-outline"></i>
                </el-popover>
              </p>
              <h1 v-loading="load1" @click="Jump_active">
                {{cardDate.cardThree.number}}</h1>
            </div>
            <div class="card-down_sequential">
              <p>用户总数：<span v-loading="load1"> {{cardDate.cardThree.loginNumber}}</span></p>
            </div>
          </li>
          <li>
            <div class="card-top_title">
              <p>活跃率 <el-popover placement="top-start" width="200" trigger="hover" content="一段时间内的活跃人数 / 用户总数">
                  <i slot="reference" class="el-icon-warning-outline"></i>
                </el-popover>
              </p>
              <div v-loading="load1" id="echarts-activeRate"></div>
            </div>
          </li>
        </ul>
      </div>

      <!-- 折线图 -->
      <div class="trafficTrends">
        <!-- <p class="error_message" v-if="errorMessage">折线图仅支持2天及以上时间段的数据展示</p> -->
        <div v-loading="load2" id="trafficTrends-left"></div>
        <div class="trafficTrends-right">
          <ul>
            <li>
              <div>
                <i style="color: #2FC25B;" class="el-icon-warning-outline"></i>
                <span>访问量：</span>指某个时间段内用户浏览总次数。
              </div>
            </li>
            <li>
              <div>
                <i style="color: #1890FF;" class="el-icon-warning-outline"></i>
                <span>访问用户数：</span>指某个时间段内用户登录总人数。
              </div>
            </li>
            <li>
              <div>
                <i style="color: #E6492D;" class="el-icon-warning-outline"></i>
                <span>活跃用户数：</span>指某个时间段内用户活跃总人数。
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!-- 个人访问·排行 -->
      <div class="access-list">
        <ul>
          <li>
            <div class="title-box">
              <h2>个人访问排行(PV)</h2>
            </div>
            <div v-loading="load3" id="accessListOne" class="accessList">

            </div>
          </li>
          <li>
            <div class="title-box">
              <h2>个人访问排行(UV)</h2>
            </div>
            <div v-loading="load4" id="accessListTwo" class="accessList">

            </div>
          </li>
          <li>
            <div class="title-box">
              <h2>个人活跃排行</h2>
            </div>
            <div v-loading="load5" id="accessListThree" class="accessList">

            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>
<script src="../../mobile_static/js/element.js"></script>
<script type="module">
  import { postTwoId, postOneId, RequestJurisdiction } from '../../mobile_static/axios/axios.config.js'
  import { thousandFilter } from '../../mobile_static/tool/formatFiltering.js';

  new Vue({
    el: '#app',
    data: function () {
      return {
        isSelect: 0,
        value1: [],
        selectValue: "",//搜索框的值
        startDate: "",
        endDate: "",
        startDateLast: "2019-01-01",
        endDateLast: "2022-03-03",
        selectOptions: [
          {
            value: "",
            label: "全部"
          },
          {
            value: "HEADQUARTERS",
            label: "总部"
          },
          {
            value: "oilRefining",
            label: "炼油销售有限公司"
          },
        ],
        cardDate: {
          cardOne: {
            number: "0",
            sequential: "0"
          },
          cardTwo: {
            number: "0",
            sequential: "0"
          },
          cardThree: {
            number: "0",
            loginNumber: "0"
          },
          cardFour: {
            activeRate: "0"
          }
        },
        echartsArr: {
          myChart: "", mytrafficTrends: "", myaccessListOne: "", myaccessListThree: ""
        },
        Flow_trend: {
          xAxisData: [],
          k0view_cnt: [],
          k0user_cnt: [],
          k0active_user_cnt: []
        },
        Enterprise_accessPV: {
          k0view_cnt: [],
          g0enterprise_name: []
        },
        Enterprise_accessUV: {
          k0view_cnt: [],
          g0enterprise_name: []
        },
        Active_enterprise: {
          k0view_cnt: [],
          g0enterprise_name: []
        },
        token: "",
        errorMessage: false,
        load1: false,
        load2: false,
        load3: false,
        load4: false,
        load5: false,
      }
    },
    created() {
      //进入页面获取token做请求
      if (window.location.search) {
        this.token = window.location.search.slice(1).split("=")[1]
      } else {
        alert("页面访问失败")
        window.location.href = '../error/error.html'
      }
    },
    mounted() {
      if (sessionStorage.getItem("startAndEndDate2")) {
        let isSelect_cun = sessionStorage.getItem("isSelect")
        // this.isSelect = isSelect_cun * 1
        this.startDate = JSON.parse(sessionStorage.getItem("startAndEndDate2"))[0]
        this.endDate = JSON.parse(sessionStorage.getItem("startAndEndDate2"))[1]
        this.value1 = isSelect_cun == 5 ? [this.startDate, this.endDate] : []
      } else if (this.value1.length) {
        this.startDate = this.value1[0]
        this.endDate = this.value1[1]
      } else {
        let date1 = new Date();
        //今天时间
        let time1 = date1.getFullYear() + "-" + this.ZeroComplement(date1.getMonth() + 1) + "-" + this.ZeroComplement(date1.getDate())
        let date2 = new Date(date1);
        let date3 = new Date(date1);
        date2.setDate(date1.getDate() + -7);
        date3.setDate(date1.getDate() + -14);
        //num是正数表示之后的时间，num负数表示之前的时间，0表示今天
        let time2 = date2.getFullYear() + "-" + this.ZeroComplement(date2.getMonth() + 1) + "-" + this.ZeroComplement(date2.getDate());
        let time4 = date2.getFullYear() + "-" + this.ZeroComplement(date2.getMonth() + 1) + "-" + this.ZeroComplement(date2.getDate() - 1);
        let time3 = date3.getFullYear() + "-" + this.ZeroComplement(date3.getMonth() + 1) + "-" + this.ZeroComplement(date3.getDate());
        this.startDate = time2
        this.endDate = `${date1.getFullYear()}-${this.ZeroComplement(date1.getMonth() + 1)}-${this.ZeroComplement(date1.getDate())}`
        this.endDateLast = time4
        this.startDateLast = time3
      }

      //携带token做请求
      RequestJurisdiction({
        identityToken: this.token,
        platformFlag: 1
      }).then(res => {
        // console.log(res.data);
        if (res.data.code == 200) {
          res = JSON.parse(res.data.msg);
          this.selectOptions = res.data
          sessionStorage.setItem('codeAll', JSON.stringify(res.data))
          if (sessionStorage.getItem("code")) {
            this.selectValue = sessionStorage.getItem("code")
          } else {
            if (res.total) {
              this.selectValue = this.selectOptions[0].g0departmentcode
            } else {
              alert("未获取到所属组织机构信息，无法查看。")
              window.location.href = '../error/error.html'
            }
          }
          this.isSelect = sessionStorage.getItem("isSelect") || 2
          if (this.isSelect == 5) {
            this.RequestFourCrazy()
            this.RequestTrafficTrend()
            this.RequestAccessRankingPV()
            this.RequestAccessRankingUV()
            this.RequestActiveRanking()
          }
        } else {
          alert("token过期")
          window.location.href = '../error/error.html'
        }

      })
      setTimeout(() => {
        window.onresize = () => {
          this.echartsArr.myChart.resize();
          this.echartsArr.mytrafficTrends.resize();
          this.echartsArr.myaccessListOne.resize();
          this.echartsArr.myaccessListTwo.resize();
          this.echartsArr.myaccessListThree.resize();
        }
      }, 200)
      $(window.parent.document).find("iframe").load(function () {
        var main = $(window.parent.document).find("iframe");
        var mainheight = $(document).height() + 30;
        main.height(document.querySelector('html').style.height.slice(0, -2) * 1);
      });
    },
    watch: {
      isSelect(val) {
        let nowDate = new Date();
        if (val != 5) {
          this.endDate = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-${this.ZeroComplement(nowDate.getDate())}`
        }
        if (val == 1) {
          this.value1 = []
          if (nowDate.getDate() == 1) {
            if (nowDate.getMonth() == 1 || 3 || 5 || 7 || 8 || 10 || 12) {
              this.startDate = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-31`
              this.endDateLast = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-30`
              this.startDateLast = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-30`
            } else if (nowDate.getMonth() == 4 || 6 || 9 || 11) {
              this.startDate = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-30`
              this.endDateLast = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-29`
              this.startDateLast = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-29`
            } else {
              this.startDate = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-28`
              this.endDateLast = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-27`
              this.startDateLast = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-27`
            }
          } else {
            this.startDate = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-${this.ZeroComplement(nowDate.getDate() - 1)}`
            this.endDateLast = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-${this.ZeroComplement(nowDate.getDate() - 2)}`
            this.startDateLast = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-${this.ZeroComplement(nowDate.getDate() - 2)}`
          }
        } else if (val == 2) {
          this.value1 = []
          let date1 = new Date();
          //今天时间
          let time1 = date1.getFullYear() + "-" + this.ZeroComplement(date1.getMonth() + 1) + "-" + this.ZeroComplement(date1.getDate())
          let date2 = new Date(date1);
          let date3 = new Date(date1);
          date2.setDate(date1.getDate() + -7);
          date3.setDate(date1.getDate() + -14);
          //num是正数表示之后的时间，num负数表示之前的时间，0表示今天
          let time2 = date2.getFullYear() + "-" + this.ZeroComplement(date2.getMonth() + 1) + "-" + this.ZeroComplement(date2.getDate());
          let time4 = date2.getFullYear() + "-" + this.ZeroComplement(date2.getMonth() + 1) + "-" + this.ZeroComplement(date2.getDate() - 1);
          let time3 = date3.getFullYear() + "-" + this.ZeroComplement(date3.getMonth() + 1) + "-" + this.ZeroComplement(date3.getDate());
          this.startDate = time2
          this.endDateLast = time4
          this.startDateLast = time3
          // console.log(this.startDate,this.endDate,this.startDateLast,this.endDateLast);

        } else if (val == 3) {
          this.value1 = []
          let day_30 = new Date().setMonth((new Date().getMonth() - 1));    //日期是30天前的对应时间戳
          day_30 = new Date(day_30);       //转换成标准时间
          let y = day_30.getFullYear();    //年
          let m = day_30.getMonth() + 1;    //月
          let d = day_30.getDate();        //日
          if (m < 10) {
            m = '0' + m;
          }
          if (d < 10) {
            d = '0' + d;
          }
          day_30 = y + '-' + m + '-' + d;    //日期是30天前的对应字符串 xxxx-xx-xx　
          this.startDate = day_30
          // console.log(this.startDate,this.endDate,this.startDateLast,this.endDateLast);

        } else if (val == 4) {
          this.value1 = []
          this.startDate = nowDate.getFullYear() + "-01-01"
        }
        if (sessionStorage.getItem("code")) {
          this.selectValue = sessionStorage.getItem("code")
        }
        //  else {
        //   this.selectValue = this.selectOptions[0].g0departmentcode
        // }
        if (val !== 5) {
          this.RequestFourCrazy()
          this.RequestTrafficTrend()
          this.RequestAccessRankingPV()
          this.RequestAccessRankingUV()
          this.RequestActiveRanking()
        }
      }
    },
    methods: {
      //跳转访问总量
      Jump_PV() {
        if (this.isSelect == 5) {
          sessionStorage.setItem("startAndEndDate2", JSON.stringify(this.value1))
        } else {
          sessionStorage.setItem("startAndEndDate2", JSON.stringify([this.startDate, this.endDate]))
        }
        sessionStorage.setItem("isSelect", this.isSelect)
        sessionStorage.setItem('jurisdiction', "0")
        window.location.href = './accessDetailed.html?code=' + this.selectValue + "&startDate=" + this.startDate + "&endDate=" + this.endDate;
      },
      //跳转访问用户数
      Jump_UV() {
        if (this.isSelect == 5) {
          sessionStorage.setItem("startAndEndDate2", JSON.stringify(this.value1))
        } else {
          sessionStorage.setItem("startAndEndDate2", JSON.stringify([this.startDate, this.endDate]))
        }
        sessionStorage.setItem("isSelect", this.isSelect)
        sessionStorage.setItem('jurisdiction', "0")
        window.location.href = './accessUserDetailed(UV).html?code=' + this.selectValue + "&startDate=" + this.startDate + "&endDate=" + this.endDate;
      },
      //跳转活跃用户数
      Jump_active() {
        if (this.isSelect == 5) {
          sessionStorage.setItem("startAndEndDate2", JSON.stringify(this.value1))
        } else {
          sessionStorage.setItem("startAndEndDate2", JSON.stringify([this.startDate, this.endDate]))
        }
        sessionStorage.setItem("isSelect", this.isSelect)
        sessionStorage.setItem('jurisdiction', "0")
        window.location.href = './activeUsersList.html?code=' + this.selectValue + "&startDate=" + this.startDate + "&endDate=" + this.endDate;
      },
      //日期选择器改变重新请求数据
      dateChange() {
        if (this.value1) {
          this.isSelect = 5
          this.startDate = this.value1[0]
          this.endDate = this.value1[1]
        } else {
          this.isSelect = 2
        }

        this.RequestFourCrazy()
        this.RequestTrafficTrend()
        this.RequestAccessRankingPV()
        this.RequestAccessRankingUV()
        this.RequestActiveRanking()
      },
      //下拉框改变调用
      downChange() {
        this.RequestFourCrazy()
        this.RequestTrafficTrend()
        this.RequestAccessRankingPV()
        this.RequestAccessRankingUV()
        this.RequestActiveRanking()
      },
      //请求四个框数据
      RequestFourCrazy() {
        this.load1 = true
        postOneId("zsbdsgk00", {
          pageSize: 10,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
          g0enterpriseCode: this.selectValue,
          startDateLast: this.startDateLast,
          endDateLast: this.endDateLast
        }).then(res => {
          if (!res) {
            return;
          }
          this.load1 = false
          res = JSON.parse(res.data.msg);
          // console.log("请求四个框数据成功", res);
          this.cardDate.cardOne.number = res.data[0].k0view_cnt
          this.cardDate.cardOne.number = thousandFilter(this.cardDate.cardOne.number)
          this.cardDate.cardOne.sequential = res.data[0].k0view_cnt_hb.toFixed(2)
          this.cardDate.cardTwo.number = res.data[0].k0user_cnt
          this.cardDate.cardTwo.number = thousandFilter(this.cardDate.cardTwo.number)
          this.cardDate.cardTwo.sequential = res.data[0].k0user_cnt_hb.toFixed(2)
          this.cardDate.cardThree.number = res.data[0].k0active_user_cnt
          this.cardDate.cardThree.number = thousandFilter(this.cardDate.cardThree.number)
          this.cardDate.cardThree.loginNumber = res.data[0].k0login_user_cnt
          this.cardDate.cardThree.loginNumber = thousandFilter(this.cardDate.cardThree.loginNumber)
          this.cardDate.cardFour.activeRate = res.data[0].k0active_rate
          // 活跃度
          let chartDom = document.getElementById('echarts-activeRate');
          this.echartsArr.myChart = echarts.init(chartDom);
          // activeRate && this.echartsArr.myChart.setOption({
          this.echartsArr.myChart.setOption({
            tooltip: {
              trigger: 'item',
            },
            color: ['#1890FF', '#F0F2F5'],
            series: [{
              name: '活跃率',
              type: 'pie',
              radius: ['40%', '60%'],
              center: ['50%', '50%'],
              label: {
                show: true,
                position: 'center',
                color: "#4c4a4a",
                formatter: this.cardDate.cardFour.activeRate,
                fontSize: 14
              },
              labelLine: {
                show: false
              },
              data: [{
                value: res.data[0].k0active_user_cnt,
                name: '活跃人数'
              },
              {
                value: res.data[0].k0unactive_user_cnt,
                name: '不活跃人数'
              },
              ]
            }]
          });
        })
      },
      //请求数据趋势
      RequestTrafficTrend() {
        this.load2 = true
        postOneId("llqs00", {
          pageSize: 4000,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
          g0enterpriseCode: this.selectValue,
        }).then(res => {
          if (!res) {
            return;
          }
          this.load2 = false
          res = JSON.parse(res.data.msg);
          this.Flow_trend.xAxisData = []
          this.Flow_trend.k0view_cnt = []
          this.Flow_trend.k0user_cnt = []
          this.Flow_trend.k0active_user_cnt = []
          if (res.total == 1) {
            this.errorMessage = true
          } else {
            this.errorMessage = false
          }
          if (res.data.length > 1) {
            for (let i = 0; i < res.data.length; i++) {
              this.Flow_trend.xAxisData.push(res.data[i].g0accessdate)
              this.Flow_trend.k0view_cnt.push(res.data[i].k0view_cnt)
              this.Flow_trend.k0user_cnt.push(res.data[i].k0user_cnt)
              this.Flow_trend.k0active_user_cnt.push(res.data[i].k0active_user_cnt)
            }
          }
          let maxX1 = parseInt(Math.max(...this.Flow_trend.k0view_cnt) + 2000) / 1000 * 1000
          let maxX2 = 0
          let maxY1 = parseInt(Math.max(...this.Flow_trend.k0user_cnt) + 10) / 10 * 10
          let maxY2 = parseInt(Math.max(...this.Flow_trend.k0active_user_cnt) + 10) / 10 * 10

          if (maxY1 > maxY2) {
            maxX2 = maxY1
          } else if (maxY1 < maxY2) {
            maxX2 = maxY2
          } else {
            maxX2 = maxY1
          }
          // 流量趋势
          let trafficTrendsDom = document.getElementById("trafficTrends-left");
          this.echartsArr.mytrafficTrends = echarts.init(trafficTrendsDom)
          // trafficTrends && this.echartsArr.mytrafficTrends.setOption({
          this.echartsArr.mytrafficTrends.setOption({
            title: {
              text: '流量趋势',
              left: 10,
              textStyle: {
                color: "#4583D6",
                fontSize: 18,
                fontWeight: "bold",
              },
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {},
            grid: {
              top: '20%',
              left: '5%',
              right: '4%',
              bottom: '5%',
              containLabel: true
            },
            color: ['#2FC25B', '#1890FF', '#E6492D'],
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: this.Flow_trend.xAxisData
            },
            yAxis: [{
              name: '人次',
              type: 'value',
              // min: 0,
              // max: maxX1,
              axisLine: {
                show: false //y轴线消失
              },
              axisTick: {
                show: false //y轴坐标点消失
              },
              splitLine: {
                show: false
                // lineStyle: {
                //   type: "dotted"
                // }
              }
            },
            {
              name: '人数',
              type: 'value',
              // min: 0,
              // max: maxX2,
              axisLine: {
                show: false //y轴线消失
              },
              axisTick: {
                show: false //y轴坐标点消失
              },
              splitLine: {
                // lineStyle: {
                //   type: "dotted"
                // }
                show: false
              }
            },],
            series: [{
              name: '访问量(人次)',
              type: 'line',
              yAxisIndex: 0,
              data: this.Flow_trend.k0view_cnt
            },
            {
              name: '访问用户数(人数)',
              type: 'line',
              yAxisIndex: 1,
              data: this.Flow_trend.k0user_cnt
            },
            {
              name: '活跃用户数(人数)',
              type: 'line',
              yAxisIndex: 1,
              data: this.Flow_trend.k0active_user_cnt
            }]
          })
          if (this.errorMessage) {
            trafficTrendsDom.innerHTML = '折线图仅支持2天及以上时间段的数据展示'
            trafficTrendsDom.style.cssText = 'text-align:center; color: #f00; border: none;line-height: 400px;font-size:18px;'
            trafficTrendsDom.removeAttribute('_echarts_instance_')
          }
          if (!this.errorMessage && res.data.length === 1) {
            this.handleNoDataStyle(trafficTrendsDom)
          }
        })
      },
      handleNoDataStyle(dom) {
        dom.innerHTML = '暂无数据'
        dom.style.cssText = 'text-align:center; color: #999; border: none;line-height: 400px;font-size:18px;'
        dom.removeAttribute('_echarts_instance_')
      },
      //请求个人访问排行PV
      RequestAccessRankingPV() {
        this.load3 = true
        postTwoId("grfwph00", {
          pageSize: 10,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
          g0enterpriseCode: this.selectValue
        }).then(res => {
          this.load3 = false
          res = JSON.parse(res.data.msg);
          // console.log(res.data,'PV');
          let arr = res.data.sort((a, b) => {
            return a.K0VIEW_CNT - b.K0VIEW_CNT
          })
          this.Enterprise_accessPV.k0view_cnt = []
          this.Enterprise_accessPV.g0enterprise_name = []
          for (let i = 0; i < arr.length; i++) {
            this.Enterprise_accessPV.k0view_cnt.push(arr[i].K0VIEW_CNT)
            if (arr[i].G0USERNAME == null || arr[i].G0USERNAME == "") {
              this.Enterprise_accessPV.g0enterprise_name.push("")
            } else {
              this.Enterprise_accessPV.g0enterprise_name.push(arr[i].G0USERNAME)
            }
          }
          // 企业访问排行 PV
          let accessListOneDom = document.getElementById("accessListOne");
          this.echartsArr.myaccessListOne = echarts.init(accessListOneDom);
          // accessListPV && this.echartsArr.myaccessListOne.setOption({
          if (res.data.length > 1) {
            this.echartsArr.myaccessListOne.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              bottom: '3%',
              containLabel: true
            },
            color: ['#2FC25B'],
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01],
              show: false
            },
            yAxis: {
              axisLabel: {
                interval: 0,
                align: 'left',
                formatter: function (val) {
                  if (val.length > 8) {
                    return `${val.slice(0, 8)}...`
                  }
                  return val;
                }
              },
              offset: 60,
              type: 'category',
              data: this.Enterprise_accessPV.g0enterprise_name,
              axisTick: {
                show: false //不显示坐标轴刻度线
              },
              axisLine: {
                show: false, //不显示坐标轴线
              },
            },
            series: [{
              type: 'bar',
              data: this.Enterprise_accessPV.k0view_cnt,
              label: {
                show: false,
                position: 'right',
              },
            }]
           })
          } else {
            this.handleNoDataStyle(accessListOneDom)
          }
        })
      },
      // 请求个人访问排行UV
      RequestAccessRankingUV() {
        this.load4 = true
        postTwoId("grfwphuv00", {
          pageSize: 10,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
          g0enterpriseCode: this.selectValue
        }).then(res => {
          this.load4 = false
          res = JSON.parse(res.data.msg);
          // console.log(res.data,'UV');
          let arr = res.data.sort((a, b) => {
            return a.K0LOGIN_CNT - b.K0LOGIN_CNT
          })
          this.Enterprise_accessUV.k0view_cnt = []
          this.Enterprise_accessUV.g0enterprise_name = []
          for (let i = 0; i < arr.length; i++) {
            this.Enterprise_accessUV.k0view_cnt.push(arr[i].K0LOGIN_CNT)
            if (arr[i].G0USERNAME == null || arr[i].G0USERNAME == "") {
              this.Enterprise_accessUV.g0enterprise_name.push("")
            } else {
              this.Enterprise_accessUV.g0enterprise_name.push(arr[i].G0USERNAME)
            }
          }
          // 个人访问排行 UV
          let accessListTwoDom = document.getElementById("accessListTwo");
          this.echartsArr.myaccessListTwo = echarts.init(accessListTwoDom);
          // accessListUV && this.echartsArr.myaccessListTwo.setOption({
          if (res.data.length > 1) {
            this.echartsArr.myaccessListTwo.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              bottom: '3%',
              containLabel: true
            },
            color: ['#1890FF'],
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01],
              show: false
            },
            yAxis: {
              axisLabel: {
                interval: 0,
                align: 'left',
                formatter: function (val) {
                  if (val.length > 8) {
                    return `${val.slice(0, 8)}...`
                  }
                  return val;
                }
              },
              offset: 60,
              type: 'category',
              data: this.Enterprise_accessUV.g0enterprise_name,
              axisTick: {
                show: false //不显示坐标轴刻度线
              },
              axisLine: {
                show: false, //不显示坐标轴线
              },
            },
            series: [{
              type: 'bar',
              data: this.Enterprise_accessUV.k0view_cnt,
              label: {
                show: false,
                position: 'right',
              },
            }]
           })
          } else {
            this.handleNoDataStyle(accessListTwoDom)
          }
        })
      },
      // 请求个人活跃排行
      RequestActiveRanking() {
        this.load5 = true
        postTwoId("grhyph00", {
          pageSize: 10,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
          g0enterpriseCode: this.selectValue
        }).then(res => {
          this.load5 = false
          res = JSON.parse(res.data.msg);
          // console.log(res);
          let arr = res.data.sort((a, b) => {
            return a.K0ACTIVE_CNT - b.K0ACTIVE_CNT
          })
          this.Active_enterprise.k0view_cnt = []
          this.Active_enterprise.g0enterprise_name = []
          for (let i = 0; i < arr.length; i++) {
            this.Active_enterprise.k0view_cnt.push(arr[i].K0ACTIVE_CNT)
            if (arr[i].G0USERNAME == null || arr[i].G0USERNAME == "") {
              this.Active_enterprise.g0enterprise_name.push("")
            } else {
              this.Active_enterprise.g0enterprise_name.push(arr[i].G0USERNAME)
            }
          }
          // 企业活跃排行
          let accessListThreeDom = document.getElementById("accessListThree");
          this.echartsArr.myaccessListThree = echarts.init(accessListThreeDom);
          // activeRanking && this.echartsArr.myaccessListThree.setOption({
          if (res.data.length > 1) {
            this.echartsArr.myaccessListThree.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              bottom: '3%',
              containLabel: true
            },
            color: ['#E6492D'],
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01],
              show: false
            },
            yAxis: {
              axisLabel: {
                interval: 0,
                align: 'left',
                formatter: function (val) {
                  if (val.length > 8) {
                    return `${val.slice(0, 8)}...`
                  }
                  return val;
                }
              },
              offset: 60,
              type: 'category',
              data: this.Active_enterprise.g0enterprise_name,
              axisTick: {
                show: false //不显示坐标轴刻度线
              },
              axisLine: {
                show: false, //不显示坐标轴线
              },
            },
            series: [{
              type: 'bar',
              data: this.Active_enterprise.k0view_cnt,
              label: {
                show: false,
                position: 'right',
              },
            }]
           })
          } else {
            this.handleNoDataStyle(accessListThreeDom)
          }
        })

      },
      //补零函数
      ZeroComplement(num) {
        if (num < 10) {
          return "0" + num;
        } else {
          return num;
        }
      }
    }
  })
</script>